<template>
  <div ref="domRef" class="dom-wrapper"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as THREE from 'three';
let scene: THREE.Scene;
let controls: OrbitControls;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;

const domRef = ref(null);
const init = (warpDom: HTMLElement) => {
  // scene
  scene = new THREE.Scene();

  // camera
  const SCREEN_WIDTH = warpDom.clientWidth;
  const SCREEN_HEIGHT = warpDom.clientHeight;
  const VIEW_ANGLE = 45,
    ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
    NEAR = 0.1,
    FAR = 20000;
  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  camera.position.set(0, 150, 400);
  camera.lookAt(scene.position);
  scene.add(camera);

  // renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  warpDom.appendChild(renderer.domElement);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // lights
  const light = new THREE.PointLight(0xffffff);
  light.position.set(-100, 150, 100);
};
const render = () => {
  renderer.render(scene, camera);
};
const animate = () => {
  requestAnimationFrame(animate);
  render();
};
onMounted(() => {
  if (domRef.value) {
    init(domRef.value);
    animate();
  }
});
</script>

<style scoped>
.dom-wrapper {
  width: 100%;
  height: 100%;
}
</style>
